<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background: #ddd;
        }
        /* 显示三角形 首先要将width设为0 利用border 的width 由四个三角形组成的一个矩形*/
        .trangle1,.trangle2,.trangle3,.trangle4{
            margin: 50px;
            width: 0;
            border: 10px solid gray;
        }
        /*显示border top  下三角形*/
        .trangle1{
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        /*显示border left  右三角形*/
        .trangle2{
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        /*显示border right  左三角形*/
        .trangle3{
            border-top-color: transparent;
            border-left-color: transparent;
            border-bottom-color: transparent;
        }
        /*显示border bottom  上三角形*/
        .trangle4{
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        
        .topTrangle{
            top: 40%;
            right: 10%;
            border: 6px solid ghostwhite;
            border-color: ghostwhite transparent transparent transparent
        }
        .bottomTrangle{
            bottom: 35%;
            right: 10%;
            border: 6px solid ghostwhite;
            border-color: transparent transparent ghostwhite transparent
        }
        .btn-container{
            display: inline-block;
            border: 1px solid #eee;
            padding: 2px 4px;
            position: relative;
            cursor: pointer;
        }
        .btn-container>span{
            margin-right: 20px;
        }
        .btn{
            display: inline-block;
            position: absolute;
        }
        .btn2-Top::after{
            content: '';
            position: absolute;
            top: 40%;
            right: 10%;
            display: inline-block;
            border: 6px solid ghostwhite;
            border-color: ghostwhite transparent transparent transparent
        }
        .btn2-Bottom::after{
            content: '';
            position: absolute;
            bottom: 35%;
            right: 10%;
            display: inline-block;
            border: 6px solid ghostwhite;
            border-color: transparent transparent ghostwhite transparent
        }
    </style>
</head>

<body>
    <div class="trangle1"></div>
    <div class="trangle2"></div>
    <div class="trangle3"></div>
    <div class="trangle4"></div>

    <input type="text">
    <div class="btn-container">
        <span>点击</span>
        <!-- 通过添加一个空标签来实现后缀的三角形 -->
        <div class="btn topTrangle"></div>
    </div>

    <div class="btn-container">
        <!-- 直接利用本标签的after 伪元素 实现后缀的三角形 代码都一样 -->
        <span class="btn2 btn2-Top">点击</span>
    </div>
    <script>
        window.onload = function () {
            var btn = document.getElementsByClassName("btn")[0];
            var btn2 = document.getElementsByClassName("btn2")[0];
            var handleClick = document.getElementsByClassName("btn-container");

            handleClick[0].addEventListener('click', function () {
                console.log(btn.classList[1]);
                if (btn.classList[1] === 'topTrangle') {
                    btn.classList.remove('topTrangle');
                    btn.classList.add('bottomTrangle');
                } else if (btn.classList[1] === 'bottomTrangle') {
                    btn.classList.remove('bottomTrangle');
                    btn.classList.add('topTrangle');
                }
            }, false)

            handleClick[1].addEventListener('click', function () {
                if (btn2.classList[1] === 'btn2-Top') {
                    btn2.classList.remove('btn2-Top');
                    btn2.classList.add('btn2-Bottom');
                } else if (btn2.classList[1] === 'btn2-Bottom') {
                    btn2.classList.remove('btn2-Bottom');
                    btn2.classList.add('btn2-Top');
                }
            }, false)
        }
    </script>
</body>

</html>